<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>category管理</title>
<link rel="stylesheet" type="text/css" href="${path}/static/common/bootstrap-3.3.7-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="${path}/static/common/layui/css/layui.css"/>
</head>
<body>
	<a class="btn btn-primary" href="javascript:void(0)" onclick="insertTopCategory()" >添加一级分类</a>
	<a class="btn btn-primary" href="javascript:void(0)" onclick="insertSeacondCategory()" >添加二级分类</a>
	
	<table id="tableId" lay-filter="tableFilter"></table>
	
	
<!-- script -->
	<script src="${path}/static/common/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
	<script src="${path}/static/common/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<script src="${path}/static/common/mylayer.js" type="text/javascript" charset="utf-8"></script>
	<script src="${path}/static/common/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/html" id="parentIdTpl">
		{{#		if(d.parentId == 0) {					}}
					一级分类
		{{#	    } else if (d.parentId == 100001){		}}
					家用电器
		{{#     }else if (d.parentId == 100002){		}}
					数码3C
		{{#     }else if (d.parentId == 100003){		}}
					服装箱包
		{{#     }else if (d.parentId == 100004){		}}
					食品生鲜
		{{#     }else if (d.parentId == 100005){		}}
					酒水饮料
		{{#     }										}}

	</script>
	<script type="text/html" id="statusTpl">
		{{#		if(d.status == 1) {				}}
					正常
		{{#	    } else if (d.status == 2) {		}}
					废弃
		{{#     }								}}

	</script>
	
<!--  2.按钮  的集合 -->	
<!-- 删除 & 编辑 -->
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>

<!-- 批量 删除  -->
	<script type="text/html" id="toolbarDemo">
  	 	<div class="layui-btn-container">	/* 2.多选：添加 批量删除 按钮， */
      		 <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>	
 		 </div>
	</script>
	
	<script type="text/javascript">
		// layui包含很多模块，不会都去加载，而是使用哪个模块就去加载哪个模块
		layui.use('table', function(){
		    var table = layui.table;
		    
		/* ------------------------展示-------------------------------------- */		  
		    //使用table去渲染表格
			table.render({
			    elem: '#tableId' // 执行要渲染的table的id
			    ,height: 500
			    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
			    ,url: '${path}/category/selectByPage.action' //数据接口
			    ,page: true //开启分页
			    ,cols: [[ //表头
			    	{type: 'checkbox', fixed: 'left'}							/* 1.多选：加入多选按钮 */
			      ,{field: 'id', title: 'ID', sort: true}
			      ,{field: 'parentId', title: '父类id',templet:"#parentIdTpl"}
			      ,{field: 'name', title: '分类名称'}
			      ,{field: 'status', title: '状态' ,templet:"#statusTpl"}
			      ,{field: 'sortOrder', title: '排序编号'}
			      ,{field: 'createTime', title: '创建时间', templet:"<div>{{!d.createTime?'未知':layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}</div>"}
			      ,{field: 'updateTime', title: '更新时间', templet:"<div>{{!d.updateTime?'未知':layui.util.toDateString(d.updateTime, 'yyyy-MM-dd')}}</div>"}
			      ,{title:'操作', toolbar: '#barDemo'}
			    ]]
				,id: 'tableReload'
			});
		    
		/* ------------------------删除--------------------------------------- */
					//监听右侧的toolbar的点击事件
			table.on('tool(tableFilter)', function(obj){
			    var data = obj.data;
			    console.log(obj)
			    if(obj.event === 'del'){
			        layer.confirm('真的删除行么', function(index){
			        	$.post(
			        		"${path}/category/deleteById.action",
			        		{"id" : data.id},
			        		function(result) {
			        			if(result.success) {
			        				mylayer.successMsg(result.msg);
			        				//重新加载表格数据
			        			    table.reload('tableReload');
			        			} else {
			        				mylayer.errorMsg(result.msg);
			        			}
			        			
			        			//layer.close(index);
			        		},
			        		"json"
			        	);
			        });
			    } else if(obj.event === 'edit'){
			        layer.msg("编辑");
			        
			    }
			});
			
		/* ------------------------批量删除--------------------------------------- */
			/* 1.监听右侧的toolbar的点击事件 */
			table.on('tool(tableFilter)', function(obj){
			    var data = obj.data;
			    console.log(obj)
			    if(obj.event === 'del'){
			        layer.confirm('真的删除行么', function(index){
			        	$.post(
			        		"${path}/category/deleteById.action",
			        		{"id" : data.id},
			        		function(result) {
			        			if(result.success) {
			        				mylayer.successMsg(result.msg);
			        				//重新加载表格数据
			        			    table.reload('tableReload');
			        			} else {
			        				mylayer.errorMsg(result.msg);
			        			}
			        			
			        			//layer.close(index);
			        		},
			        		"json"
			        	);
			        });
			    } else if(obj.event === 'edit'){
			        layer.msg("编辑");
			        
			    }
			});
		
	/* -------------------------------- */	    
		})/* table.render({}):最外层括号 */
		

		/* 添加 一级分类 按钮 */
	function insertTopCategory() {
		layer.open({
			type : 2,
			tile : "添加",
			area : ["700px", "450px"],
			content : "${path}/category/getInsertTopCategoryJsp.action"
		});
	}
		
		/* 添加 二级分类 按钮 */
	function insertSeacondCategory() {
		layer.open({
			type : 2,
			tile : "添加",
			area : ["500px", "450px"],
			content : "${path}/category/getInsertSeacondCategoryJsp.action"
		});
	}
				
		
		
	</script>
</body>
</html>